<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="closeBatch"
      @closed="closed"
    >
      <div class="upload-container">
        <div class="template-download">
          <span>{{ $t('template') }}：</span>
          <a style="color: blue" href="/template.xlsx" download>{{ $t('inventoryOrderLang.downTip') }}</a>
        </div>
        <el-upload
          ref="upload"
          class="upload-demo"
          action="your-upload-url"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
        >
          <el-button slot="trigger" type="primary">{{ $t('inventoryOrderLang.selectFile') }}</el-button>
          <div slot="tip" class="el-upload__tip">{{ fileName }}</div>
        </el-upload>
        <el-button type="primary" @click="submitUpload">{{ $t('inventoryOrderLang.confirmUp') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '40%'
    }
  },
  data() {
    return {
      fileName: '',
      uploadUrl: process.env.VUE_APP_BASE_API + '/inventoryOrder/addByFileUpload',
      file: null
    }
  },
  watch: {},
  created() {},
  methods: {
    beforeUpload(file) {
      this.fileName = file.name;
      this.file = file;
      return false; // Prevent auto upload
    },
    submitUpload() {
      if (this.file) {
        const formData = new FormData();
        formData.append('file', this.file);
        // Replace with your upload URL and implement the upload logic
        // eslint-disable-next-line no-undef
        axios.post(this.uploadUrl, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
          .then(response => {
            const res = response.data
            if (res.returnCode === 10000) {
              this.$message.success(this.$t('warehousingLang.uploadSuccess'));
            } else {
              this.$message.error(res.returnMsg)
            }
          })
          // eslint-disable-next-line handle-callback-err
          .catch(error => {
            this.$message.error(this.$t('uploadError'));
          });
      } else {
        this.$message.warning(this.$t('selectFile'));
      }
    },
    handleSuccess(response, file, fileList) {
      this.$message.success(`${file.name}` + this.$t('warehousingLang.uploadSuccess'));
    },
    // eslint-disable-next-line handle-callback-err
    handleError(err, file, fileList) {
      this.$message.error(`${file.name}` + this.$t('uploadError'));
    },
    // 关闭
    closeBatch() {
      this.visible = false
      this.$emit('close')
      console.log('对话框关闭')
    },
    closed() {
      console.log('对话框完全关闭')
    }
  }
}
</script>

<style scoped>
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.template-download {
  margin-bottom: 20px;
}
.upload-demo {
  margin-bottom: 10px;
}
.el-upload__tip {
  margin-left: 10px;
}
</style>
